<template>
  <div class="container">
    <el-form ref="form" :model="form" :rules="rules" label-width="150px">
      <el-form-item label="名称" prop="name">
        <el-input v-model="form.name" placeholder="请填写名称"></el-input>
      </el-form-item>
      <el-form-item label="简称" prop="abbr">
        <el-input v-model="form.abbr" placeholder="请填写简称"></el-input>
      </el-form-item>
      <el-form-item label="法人" prop="legalPerson">
        <el-input v-model="form.legalPerson" placeholder="请填写法人"
        ></el-input>
      </el-form-item>
      <el-form-item label="负责人" prop="leader">
        <el-input v-model="form.leader" placeholder="请填写负责人"
        ></el-input>
      </el-form-item>
      <el-form-item label="分管领导" prop="manager">
        <el-input v-model="form.manager" placeholder="请填写分管领导"
        ></el-input>
      </el-form-item>
      <el-form-item label="手机" prop="mobile">
        <el-input v-model="form.mobile" placeholder="请填写手机"></el-input>
      </el-form-item>
      <el-form-item label="座机" prop="telephone">
        <el-input v-model="form.telephone" placeholder="请填写座机"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="mail">
        <el-input v-model="form.mail" placeholder="请填写邮箱"></el-input>
      </el-form-item>
      <el-form-item label="官网地址" prop="website">
        <el-input v-model="form.website" placeholder="请填写官网地址"></el-input>
      </el-form-item>
      <el-form-item label="logo" prop="logo">
        <upload-image
            v-model="form.logo"
            :preview="logoPreview"
            @update:value="form.logo = $event"
            @update:preview="logoPreview = $event"
            :data="{
            tplCode: ossTplCode,
            prefix: 'pic/org',
            renamed: true,
          }"
            :isCropper="true"
        />
      </el-form-item>
      <el-form-item label="营业执照" prop="businessLicense">
        <upload-image
            v-model="form.businessLicense"
            :preview="businessLicensePreview"
            @update:value="form.businessLicense = $event"
            @update:preview="businessLicensePreview = $event"
            :data="{
            tplCode: ossTplCode,
            prefix: 'pic/org',
            renamed: true,
          }"
            :isCropper="true"
        />
      </el-form-item>
      <el-form-item label="社会信用代码" prop="uscc">
        <el-input v-model="form.uscc" placeholder="社会信用代码"></el-input>
      </el-form-item>
      <el-form-item label="所在省市区：" prop="address">
        <el-cascader
            v-model="selectedOptions"
            placeholder="请填写所在省市区"
            :options="form.cascaderOptions"
            :props="defaultProps"
        ></el-cascader>
      </el-form-item>
      <el-form-item label="街道/详细地址" prop="detailAddress">
        <el-input
            v-model="form.detailAddress"
            placeholder="请填写街道/详细地址"
        ></el-input>
      </el-form-item>
      <el-form-item label="简介" prop="intro">
        <el-input
            size="small"
            v-model="form.intro"
            placeholder="请填写简介"
            type="textarea"
            :autosize="{ minRows: 10, maxRows: 20 }"
            show-word-limit
            maxlength="999"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click="saveEdit"
        >保存
        </el-button
        >
        <el-button size="small" @click="goBack">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import {orgDetailExtendApi, orgEditApi, orgSaveApi,} from "../../../api/mgt/power/org";
import {regionListEnabledApi} from "../../../api/setup/region";
import {createObjectBase, deepCopy} from "@/utils";

const obj = {
  //信息
  id: "",
  name: "",
  abbr: "",
  uscc: "",
  legalPerson: "",
  leader: "",
  manager: "",
  mobile: "",
  telephone: "",
  mail: "",
  businessLicense: "",
  logo: "",
  province: "",
  city: "",
  district: "",
  detailAddress: "",
  website: "",
  intro: "",
};
const mgtOssTplCode = process.env.VUE_APP_MGT_OSS_TPL_CODE;
export default {
  data() {
    const checkPhone = (rule, value, callback) => {
      const reg = /^1[3|4|5|7|8][0-9]{9}$/;
      if (!value) {
        return callback(new Error("请填写手机"));
      }
      if (!Number.isInteger(+value)) {
        callback(new Error("请填写数字值"));
      } else {
        if (reg.test(value)) {
          callback();
        } else {
          callback(new Error("手机格式不正确"));
        }
      }
    };
    const checkEmail = (rule, value, callback) => {
      const reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
      if (!value) {
        return callback(new Error("请填写邮箱"));
      } else {
        if (reg.test(value)) {
          callback();
        } else {
          callback(new Error("请填写正确的邮箱格式"));
        }
      }
    };
    const checkAddress = (rule, value, callback) => {
      if (!this.selectedOptions.length) {
        callback(new Error('请填写所在省市区'))
      } else {
        callback()
      }
    };
    return {
      ossTplCode: mgtOssTplCode,
      businessLicensePreview: "",
      logoPreview: "",
      form: deepCopy(obj),
      defaultProps: {
        children: "children",
        value: "name",
        label: "name",
      },
      selectedOptions: [],
      rules: {
        name: [
          {required: true, message: "请填写名称", trigger: "change"},
          {max: 30, message: "长度不能超过30个字符", trigger: "change"},
        ],
        abbr: [
          {required: true, message: "请填写简称", trigger: "change"},
          {max: 10, message: "长度不能超过10个字符", trigger: "change"},
        ],
        legalPerson: [
          {required: true, message: "请填写法人", trigger: "change"},
          {max: 50, message: "长度不能超过50个字符", trigger: "change"},
        ],
        mobile: [{required: true, validator: checkPhone, trigger: "change"}],
        mail: [
          {required: true, validator: checkEmail, trigger: "change"},
          {max: 50, message: "长度不能超过50个字符", trigger: "change"},
        ],
        businessLicense: [
          {required: true, message: "请上传营业执照", trigger: "change"},
          //{ max: 200, message: "长度不能超过200个字符", trigger: "change" },
        ],
        logo: [
          {required: true, message: "请上传logo", trigger: "change"},
          //{ max: 200, message: "长度不能超过200个字符", trigger: "change" },
        ],
        address: [
          {required: true, validator: checkAddress, trigger: "change"},
        ],
        detailAddress: [
          {required: true, message: "请填写街道/详细地址", trigger: "change"},
          {max: 99, message: "长度不能超过99个字符", trigger: "change"},
        ],
        remark: [
          {required: true, message: "请填写简介", trigger: "change"},
          {max: 999, message: "长度不能超过999个字符", trigger: "change"},
        ],
      },
    };
  },
  methods: {
    // 编辑操作
    getDetail(id) {
      if (!id) {
        if (this.$refs.form != undefined) {
          this.$refs['form'].resetFields();
          this.businessLicensePreview = "";
          this.logoPreview = "";
        }
        regionListEnabledApi().then((res) => {
          this.form.cascaderOptions = res?.bizData;
        });
      } else {
        Promise.all([
          orgDetailExtendApi({id}),
          regionListEnabledApi(),
        ]).then(([orgDetail, regions]) => {
          let orgData = orgDetail.bizData;
          if (orgData.businessLicenseStr != null && orgData.businessLicenseStr != '') {
            this.businessLicensePreview = orgData.businessLicenseStr;
          }
          if (orgData.logoStr != null && orgData.logoStr != '') {
            this.logoPreview = orgData.logoStr;
          }
          const formData = Object.assign(deepCopy(orgData), {
            cascaderOptions: regions?.bizData,
          });
          this.selectedOptions[0] = formData.province;
          this.selectedOptions[1] = formData.city;
          this.selectedOptions[2] = formData.district;
          this.form = formData;
        });
      }
    },
    saveEdit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          const data = createObjectBase(this.form, Object.keys(obj));
          data.province = this.selectedOptions[0];
          data.city = this.selectedOptions[1];
          data.district = this.selectedOptions[2];
          const {id} = data;
          const fn = id ? orgEditApi : orgSaveApi;
          fn(data).then((res) => {
            this.goBack();
          });
        } else {
          return false;
        }
      });
    },
    goBack() {
      this.$router.goPage({
        path: "/org/page",
      });
    },
  },
  created() {
    const {id} = this.$route.query;
    this.getDetail(id);
  },
};
</script>
